<template>
  <div id="tab-bar-item" @click="routerGoClick">
    <slot v-if="isActive" name="item-active"></slot>
    <slot v-else name="item-icon"></slot>
<!--    <div :class="{active:isActive}"><slot name="item-text"></slot></div>-->
    <div :style="activeColor"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
  export default {
    name: "TabBarItem",
    props:{
      link:String,
      color:{
        type:String,
        default:'#ff5777'
      }
    },
    data(){
      return {
        // isActive:false,

      }
    },
    computed:{
      //判断传进来的四个路由中哪个处于活跃状态，如果当前路由跟活跃路由的路径一样则返回true
      isActive(){
        return this.$route.path === this.link //注意此处$route.path是固定写法，这个path不是定义的，是当前活跃路由里的路径
      },
      activeColor(){
        return this.isActive ? {color:this.color} : {}
      }
    },
    methods:{
      //点击按钮跳转对应的路由
      routerGoClick(){
        this.$router.replace(this.link)
      }
    }
  }
</script>

<style scoped>
  .active{
    color: #ec1648;
  }
</style>